آموزش Official Next Js Tutorial Code Along - React Web Development [ویدئو]

سرفصل ها و درس ها

معرفی Introduction

• بررسی اجمالی دوره Course Overview

• Next.js چیست و مبانی توسعه وب What Is Next.js and Web Development Basics

• ملزومات توسعه وب برای مبتدیان چیست؟ What Are the Essentials of Web Development for Beginners

• یادداشت سریع در مورد خودآموزی Quick Note on Self-Learning

• چه واکنشی برای مبتدیان کامل است What Is React for Complete Beginners

• Next.js دقیقاً چیست و مبانی مفید بودن آن What Is Next.js Exactly and Its Usefulness Basics

• چگونه وب سایت ها و HTML برای مبتدیان کامل کار می کنند How Websites and HTML Work for Complete Beginners

یک وب سایت پایه از ابتدا بسازید Build a Basic Website from Scratch

• ویرایشگر متن چیست و چگونه VSC را دریافت کنیم What Is a Text Editor and How to Get VSC

• اولین وب سایت خود را با HTML قدیمی و JS برای مبتدیان کامل راه اندازی کنید Deploy Your First Website with Old-School HTML and JS for Complete Beginners

• DOM را با JavaScript Web Basics دستکاری کنید Manipulate the DOM with JavaScript Web Basics

• برنامه نویسی و توسعه وب ضروری در مقابل اعلامی Imperative Versus Declarative Programming and Web Development

یک پروژه React از ابتدا بسازید Build a React Project from Scratch

• کد وب سایت را به صورت دستی با Src Pointing به برنامه React تبدیل کنید Convert Website Code to a React App Manually with Src Pointing

• مقدمه ای بر Babel و JSX Introduction to Babel and JSX

ملزومات جاوا اسکریپت برای تسلط بر React JavaScript Essentials for Mastering React

• Node.js و Node.js چیست را دانلود کنید Download Node.js and What Is Node.js

• راه اندازی محیط آموزشی ما Setting Up Our Learning Environment

• توابع در جاوا اسکریپت چیست؟ What Are Functions in JavaScript

• مثالی از نحوه عملکرد توابع در جاوا اسکریپت برای مبتدیان کامل Example of How Functions Work in JavaScript for Complete Beginners

• عبارات تابع در جاوا اسکریپت چیست؟ What Are Function Expressions in JavaScript

• ترفند سوال مصاحبه جاوا اسکریپت با عبارات تابع و سرگرمی مفید JavaScript Interview Question Trick with Function Expressions and Utility Fun

• افزایش عملکرد در جاوا اسکریپت چیست؟ What Is Function Hoisting in JavaScript

• نحوه کار Scope در جاوا اسکریپت How Scope Works in JavaScript

• بسته شدن چیست و یک مثال با جاوا اسکریپت توضیح داده شده است What Are Closures and an Example with JavaScript Explained

• الگوی ماژول بسته شدن پیشرفته با کپسوله کردن حریم خصوصی داده ها Advanced Closure Module Pattern with Data Privacy Encapsulation

• عملکرد و سودمندی فلش در React چیست؟ What Are Arrows Functions and Usefulness in React

• تخریب با جاوا اسکریپت Destructuring with JavaScript

React Code Along from Scratch – آموزش گام به گام React React Code Along from Scratch – Step-by-Step Learning React

• نحوه نوشتن کامپوننت ها در React How to Write Components in React

• نحوه عملکرد ساختار درخت کامپوننت در React و اجزای تودرتو How the Component Tree Structure in React Works and Nested Components

• نحوه عملکرد Props در React How Props Work in React

• نقشه برداری از طریق لیست ها در React Mapping Through Lists in React

• React Hooks و State در React چیست؟ What Are React Hooks and State in React

معرفی Next.js برای توسعه حرفه ای Introduction to Next.js for Professional Development

• مهاجرت از React به Next.js Migrating from React to Next.js

مفاهیم اصلی Next.js سطح بالاتر Higher-Level Next.js Core Concepts

• محیط توسعه و ساخت در مقابل ساخت با Next.js Development Environment and Build Versus Production Build with Next.js

• مقدمه ای بر کامپایلر Next.js Introduction to the Next.js Compiler

• ابهام زدایی منظور از Next.js 'Compiler' Demystifying What Is Meant by Next.js 'Compiler'

• Minification در Next.js چیست؟ What Is Minification in Next.js

• Bundling در Next.js چیست What Is Bundling in Next.js

• تقسیم کد در Next.js چیست؟ What Is Code Splitting in Next.js

• زمان ساخت در مقابل مبانی زمان اجرا Build-Time Versus Run-Time Basics

• کلاینت چیست و سرور در برنامه های کاربردی وب چیست - مبانی What Is the Client and What Is the Server in Web Applications - Basics

• رندرینگ در Next.js چیست What Is Rendering in Next.js

• پیش رندرینگ در Next.js چیست؟ What Is Pre-Rendering in Next.js

• CSR چیست، رندر سمت مشتری با Next.js What Is CSR, Client-Side Rendering with Next.js

• چگونه رندر سمت سرور به عنوان یک شیرجه عمیق تر کار می کند How Server-Side Rendering Works as a Deeper Dive

• SSG در Next.js چیست؟ What Is SSG in Next.js

• CDN و Edge در Next.js و Vercel چیست؟ What Are CDNs and the Edge in Next.js and Vercel

یک برنامه Next.js از Scratch Bootcamp Code-Along - Zero to Hero بسازید Build a Next.js App from Scratch Bootcamp Code-Along - Zero to Hero

• مقدمه و یادداشت سریع در مورد پروژه نهایی آینده Introduction and Quick Note about the Upcoming Final Project

• چگونه یک قالب Next.js را به صورت محلی راه اندازی کنیم How to Start a Next.js Template Locally

• نمای کلی ساختار فایل قالب Next.js Next.js Template File Structure Overview

• نحوه کار صفحات در Next.js How Pages Work in Next.js

• پیش واکشی و تقسیم کد با لینک و CSN - ناوبری سمت مشتری در N Prefetching and Codesplitting with Link And CSN – Client-Side Navigation in N

کار با Metadata و Assets در Next.js Working with Metadata and Assets in Next.js

• پروژه CSS Starter Kit را از Next.js Official دانلود کنید Download the CSS Starter Kit Project from Next.js Official

• نحوه بهینه سازی تصاویر با Next.js How Images Optimize with Next.js

• اسکریپت ها و داده های سرصفحه و Props با Next.js Scripts and Header Data and Props with Next.js

• ماژول های CSS و بهینه سازی های Next.js با Layout CSS Modules and Next.js Optimizations with Layout

• استایل جهانی با Next.js Global Styling with Next.js

• سفارشی کردن Utility Styles با Next.js Customizing Utility Styles with Next.js

• متادیتا برای سئو و رسانه های اجتماعی با Next.js Metadata for SEO and Social Media with Next.js

• نوشتن اجزای طرح بندی پویا با Next.js Writing Dynamic Layout Components with Next.js

• نحوه استفاده از Children و Props در React و Next.js How to Use Children and Props in React and Next.js

پیش رندر و واکشی داده با Next.js Pre-Rendering and Data Fetching with Next.js

• تست های پیش رندر با Next.js Pre-Rendering Tests with Next.js

• تولید استاتیک در مقابل رندر سمت سرور با Next.js چیست؟ What Is Static Generation Versus Server-Side Rendering with Next.js

• تولید استاتیک با داده در Next.js Static Generation with Data in Next.js

• الگوریتم‌های اساسی مختصر برای تمرین و پردازش داده Next.js Concise Basic Algorithms for Next.js Practice and Data Processing

• تولید استاتیک و GetStaticProps با Next.js Static Generation and GetStaticProps with Next.js

• زمان استفاده از GetStaticPropsServer با Next.js When to Use GetStaticPropsServer with Next.js

• SSR در مقابل CSR و GetServerSideProps با Next.js SSR Versus CSR and GetServerSideProps with Next.js

مسیرهای پویا با Next.js Dynamic Routes with Next.js

• نحوه ایجاد مسیرهای پویا با Next.js How to Create Dynamic Routes with Next.js

• getStaticPaths با اجرای Next.js getStaticPaths with Next.js Implementation

• تسلط بر رندر استاتیک پویا با Next.js Mastering Dynamic Static Rendering with Next.js

• رندر کردن نشانه‌گذاری و آسیب‌پذیری‌های امنیتی با HTML تزریقی Rendering Markdown and Security Vulnerabilities with Injected HTML

• صیقل دادن صفحات پست پویا Polishing the Dynamic Post Pages

• صیقل دادن کامپوننت Next.js با Styling Polishing a Next.js Component with Styling

• واکشی داده و پایگاه داده Querying Plus ISR با Next.js Fetching Data and Database Querying Plus ISR with Next.js

• مسیرهای API با Next.js API Routes with Next.js

نحوه استقرار یک برنامه Next.js از ابتدا How to Deploy a Next.js Application from Scratch

• GitHub چیست و چگونه با آن شروع کنیم What Is GitHub and How to Get Started with It

• چگونه برنامه Next.js خود را به GitHub فشار دهید How to Push Your Next.js App to GitHub

• برنامه خود را در Vercel مستقر کنید و تغییرات را با GitHub انجام دهید Deploy Your App to Vercel and Commit Changes with GitHub

• ساخت ویژگی‌های چند شاخه‌ای در دنیای واقعی در GitHub با React Real-World Multi-Branch Feature Building on GitHub with React

• درخواست ها و بررسی کدهای ادغام با استقرار خودکار Vercel GitHub Pull Requests and Merging Code Reviews with GitHub Automatic Vercel Deployment